/**
 * Created by Ysssssss on 2021/5/13.
 */

import React, {forwardRef, useContext, useState, useEffect} from "react";
import CustomizeModal, {CustomizeModalButton, CustomizeModalContext} from "@common/presentational/CustomizeModal";
import {Input, Radio, Row, Col} from "antd";
import ImageUpload from "@common/presentational/ImageUpload";
import {
    createSupplyGroup,
    editSupplyGroup,
    getSupplyGroupDetailInfo
} from "@sagas/productCenter";
import notify from "@utils/tip";
import {useDispatch} from "react-redux";

const SupplyGroupInfo = props => {
    const { callback } = props
    const { hide, params } = useContext(CustomizeModalContext)
    const { id } = params
    const [{ name = '', canModifyPrice = false, pic = '' }, setSupplyGroupInfo] = useState({})
    const dispatch = useDispatch()

    useEffect(() => {
        if (!id) return;
        dispatch(getSupplyGroupDetailInfo({
            id
        }, res => {
            setSupplyGroupInfo({
                name: res.name,
                canModifyPrice: res.can_modify_price,
                pic: res.pic
            })
        }))
    }, [id])

    const onSubmit = () => {
        if (!name) {
            notify('请输入名称')
            return;
        }
        let params = {
            name,
            canModifyPrice,
            pic
        }
        if (id) {
            params.id = id
            dispatch(editSupplyGroup(params, () => {
                callback && callback()
                hide()
            }))
        } else {
            dispatch(createSupplyGroup(params, () => {
                callback && callback()
                hide()
            }))
        }
    }

    const handleNameChange = e => {
        setSupplyGroupInfo({
            name: e.target.value,
            canModifyPrice,
            pic
        })
    }

    const handleCanModifyPriceChange = e => {
        setSupplyGroupInfo({
            name,
            canModifyPrice: e.target.value,
            pic
        })
    }

    const handlePicChange = value => {
        setSupplyGroupInfo({
            name,
            canModifyPrice,
            pic: value
        })
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={6}>名称</Col>
                <Col span={18}>
                    <Input maxLength={20} value={name} onChange={handleNameChange}/>
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={6}>设置</Col>
                <Col span={18}>
                    <Radio.Group onChange={handleCanModifyPriceChange} value={canModifyPrice}>
                        <Radio value={true}>允许经销商改价</Radio>
                        <Radio value={false}>不允许经销商改价</Radio>
                    </Radio.Group>
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={6}>封面</Col>
                <Col span={18}>
                    <ImageUpload value={pic} onChange={handlePicChange}/>
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={onSubmit}
                onCancel={hide}
            />
        </>
    )
}

export const CreateSupplyGroupModal = forwardRef((props, ref) => (
    <CustomizeModal title="新建供货组" ref={ref}>
        <SupplyGroupInfo {...props}/>
    </CustomizeModal>
))

export const EditSupplyGroupModal = forwardRef((props, ref) => (
    <CustomizeModal title="编辑供货组" ref={ref}>
        <SupplyGroupInfo {...props}/>
    </CustomizeModal>
))